<script setup>
import { ref } from 'vue'
import { onLaunch, onShow, onLoad } from '@dcloudio/uni-app'
//引入API
import { getGoodAPI } from '@/api/good.js'
//引入子组件
import ServicePanel from './components/ServicePanel.vue'
import AddressPanel from './components/AddressPanel.vue'
import VKpopup from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.vue'
//添加跳转逻辑

const details = ref({})
const localdata = ref({})
onLoad(async (options) => {
  //获取数据
  const res = await getGoodAPI(options.id)
  details.value = res.result
  console.log(details.value)
  localdata.value = {
    _id: res.result.id,
    name: res.result.name,
    goods_thumb: res.result.mainPictures[0],
    spec_list: res.result.specs.map((v) => ({ name: v.name, list: v.values })),
    sku_list: res.result.skus.map((v) => ({
      _id: v.id,
      goods_id: res.result.id,
      goods_name: res.result.name,
      image: v.picture,
      price: v.price * 100, // 注意：需要乘以 100
      stock: v.inventory,
      sku_name_arr: v.specs.map((vv) => vv.valueName),
    })),
  }
})

//引入store

//请求数据初始化页面
const popup = ref()
const popupName = ref()
const openPopup = (name) => {
  // 修改弹出层名称
  popupName.value = name
  // 打开弹出层
  popup.value?.open()
}
//sku
const isVKvisible = ref(false)

const onOpenSkuPopup = () => {
  console.log('SKU 弹窗打开')
}

const onCloseSkuPopup = () => {
  console.log('SKU 弹窗关闭')
}

const onAddCart = (data) => {
  console.log('加入购物车', data)
  // 这里可以添加加入购物车的逻辑
}

const onBuyNow = (data) => {
  console.log('立即购买', data)
  // 这里可以添加立即购买的逻辑
}
</script>

<template>
  <view>
    <swiper circular>
      <swiper-item v-for="(item, index) in details.mainPictures" :key="index">
        <image
          :src="item"
          mode="aspectFill"
          style="width: 100%; height: 100%"
        ></image>
      </swiper-item>
    </swiper>
    <view class="price">${{ details.price }}</view>
    <view class="oldprice">${{ details.oldPrice }}</view>
    <view class="name">{{ details.name }}</view>
    <view class="desc">{{ details.desc }}</view>
    <view @tap="openPopup('address')">请选择收货地址 </view>
    <view @tap="openPopup('service')">服务：无忧退快速退款免费包邮 </view>
    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
      <ServicePanel v-if="popupName === 'service'" />
      <AddressPanel v-if="popupName === 'address'" />
    </uni-popup>

    <button class="sku-btn" @click="isVKvisible = !isVKvisible">
      {{ isVKvisible ? '隐藏规格' : '选择规格' }}
    </button>

    <VKpopup
      v-model="isVKvisible"
      :localdata="localdata"
      @add-cart="onAddCart"
      @buy-now="onBuyNow"
    />
  </view>
</template>
<style lang="scss">
.price {
  font-size: 36rpx;
  color: #27ba9b;
  font-weight: bold;
  margin: 20rpx;
}

.oldprice {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
  margin: 10rpx 20rpx;
}

.name {
  font-size: 32rpx;
  color: #333;
  margin: 20rpx;
  font-weight: bold;
}

.desc {
  font-size: 28rpx;
  color: #666;
  margin: 20rpx;
  line-height: 1.5;
}

.sku-btn {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #27ba9b;
  color: #fff;
  border-radius: 40rpx;
  margin: 20rpx auto;
  text-align: center;
  font-size: 28rpx;
}
</style>
